<template>
  <div class="play-detail">
    <div class="detail-center">
      <!-- 中间左 -->
      <div class="detail-left">
        <!-- 头部 -->
        <div class="left-header">
          <!-- 头部左 -->
          <div class="header-left">
            <img :src="playListDetail.coverImgUrl" alt="" />
          </div>
          <!-- 头部右 -->
          <div class="header-right">
            <!-- 1 -->
            <div class="right-header">
              <span class="icon"></span>
              <h2>{{ playListDetail.name }}</h2>
            </div>
            <!-- 2 -->
            <div class="right-header2">
              <a href="" class="right-header2-a1">
                <img :src="creator.avatarUrl" alt="" />
              </a>
              <a href="" class="right-header2-a2">{{ creator.nickname }}</a>
              <span class="right-header2-span"
                >{{ playListDetail.createTime | dataFormat }} 创建</span
              >
            </div>
            <!-- 3 -->
            <div class="right-header3">
              <div class="playbutton">
                <div class="play" @click="playList()">播放</div>
                <div class="addplay"></div>
              </div>

              <div class="add" @click="add">
                ({{ playListDetail.subscribedCount }})
              </div>

              <div class="share" @click="share">
                ({{ playListDetail.shareCount }})
              </div>

              <div class="down" @click="down">下载</div>

              <div class="speak" @click="speak">
                ({{ playListDetail.commentCount }})
              </div>
            </div>
            <!-- 4 -->
            <div class="right-header4">
              标签：
              <div
                class="button"
                v-for="(item, index) in playListDetail.tags"
                :key="index"
                @click="toplay(item)"
              >
                {{ item }}
              </div>
            </div>
            <!-- 5 -->
            <div class="right-header5">
              <div class="p">介绍： {{ playListDetail.description }}</div>
            </div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="left-body">
          <main-table>
            <div slot="left" class="body-left">
              <a href="javascripr:;" class="hot-a">歌曲列表</a>
              <span>{{ playListDetail.trackCount }}首歌</span>
            </div>

            <div slot="right">
              播放：<span class="right-color">{{
                playListDetail.playCount
              }}</span
              >次
            </div>
            <div slot="body">
              <list-table :tableList="tableList"></list-table>
            </div>
          </main-table>
          <!-- 下载 -->
          <down></down>
          <!-- 评论区域 -->
          <main-table>
            <div slot="left" class="body-left">
              <a href="javascripr:;" class="hot-a">评论</a>
              <span>共{{ playListDetail.commentCount }}条评论</span>
            </div>
            <div slot="right"></div>
            <div slot="body">
              <div class="commit">
                <img
                  :src="
                    token
                      ? this.$store.state.userDetail.avatarUrl
                      : 'https://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=50y50'
                  "
                  alt=""
                  class="commit-img"
                />
                <!-- 评论框 -->
                <div class="commit-input">
                  <el-input
                    show-word-limit
                    maxlength="140"
                    type="textarea"
                    :rows="3"
                    placeholder="评论"
                    v-model="commitInput"
                    :disabled="disabled"
                    @focus="inputFocus"
                  >
                  </el-input>
                  <div class="commit-bottom">
                    <div class="commit-bottom-left">
                      <!-- 表情 -->
                      <el-popover
                        placement="bottom"
                        title="标题"
                        width="200"
                        trigger="click"
                        v-model="visible"
                      >
                        <div>
                          <ul>
                            <li
                              v-for="(emoji, index) in emojis"
                              :key="index"
                              @click="emojiClick(index)"
                            >
                              {{ emoji }}
                            </li>
                          </ul>
                        </div>
                        <i class="email" slot="reference"></i>
                      </el-popover>

                      <i class="em"></i>
                    </div>

                    <el-button type="primary" size="mini" @click="comment()"
                      >评论</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
          </main-table>
          <all-commit :comments="comments" :total="total"></all-commit>
          <!-- 分页 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
            :current-page="commentInfo.offset / commentInfo.limit + 1"
            :page-size="commentInfo.limit"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 中间右 -->
      <div class="detail-right">
        <subscribers :subscribers="subscribers"></subscribers>
        <hot-list :hotFiveList="hotFiveList"></hot-list>
      </div>
    </div>
    <main-footer></main-footer>
  </div>
</template>

<script>
import { ListDetail } from '@/utils/class.js'
import {
  getrecommendTop,
  getSongURL,
  getAllSong,
  getAllComment,
  comment,
  getRecommendSongList
} from '@/api/api.js'
import mainTable from '../../components/common/mainTable.vue'
import ListTable from './components/listTable.vue'
import Down from './components/down.vue'
import AllCommit from './components/allCommit.vue'
import MainFooter from '../../components/common/mainFooter.vue'
import Subscribers from './components/subscribers.vue'
import HotList from './components/hotList.vue'
// import MiniTable from "../../components/common/mini-table.vue";
export default {
  components: {
    mainTable,
    ListTable,
    Down,
    AllCommit,
    MainFooter,
    Subscribers,
    HotList
  },
  data() {
    return {
      // 喜欢这个歌单的人
      subscribers: [],
      playListDetail: [],
      creator: [],
      songs: [],
      // 表格
      tableList: [],
      commitInput: '',
      emojis: [
        '😀',
        '😄',
        '😅',
        '🤣',
        '😂',
        '😉',
        '😊',
        '😍',
        '😘',
        '😜',
        '😝',
        '😏',
        '😒',
        '🙄',
        '😔',
        '😴',
        '😷',
        '😎',
        '😮',
        '😰',
        '😭',
        '😱',
        '😩',
        '😡',
        '💀',
        '👽',
        '🤓',
        '😺',
        '😹',
        '😻',
        '🤚',
        '💩',
        '👍',
        '👎',
        '👏',
        '🙏',
        '💪'
      ],
      visible: false,
      // input按钮
      disabled: false,
      // 获取评论参数
      commentInfo: {
        limit: 20,
        offset: 0,
        before: ''
      },
      // 评论
      comments: [],
      total: 0,
      // 热歌5
      hotFiveList: []
    }
  },
  created() {
    this.getplayListDetail()
    this.getHotList()
  },
  computed: {
    token() {
      const token =
        window.sessionStorage.getItem('token') ||
        window.sessionStorage.getItem('cookie')
      if (!token) {
        return false
      } else {
        return true
      }
    }
  },
  methods: {
    // 获取推荐热门歌单随机五个
    async getHotList() {
      const { result: res } = await getRecommendSongList()
      let hotList = []
      let arr = []
      for (let i = 0; i < 5; i++) {
        let random = Math.floor(Math.random() * 30)

        if (!arr.includes(random)) {
          hotList.push(res[random])
          arr.push(random)
        } else {
          i -= 1
        }
      }
      console.log(hotList)
      for (let item of hotList) {
        const { playlist: res1 } = await getrecommendTop(item.id)
        res1.coverImgUrl += '?param=50y50'
        this.hotFiveList.push(res1)
      }

      console.log(this.hotFiveList)
    },
    // 获取歌单详情
    async getplayListDetail() {
      const { playlist: res } = await getrecommendTop(this.$route.query.id)

      this.playListDetail = res
      this.playListDetail.coverImgUrl += '?param=200y200'
      this.subscribers = this.playListDetail.subscribers
      for (let sub of this.subscribers) {
        sub.avatarUrl += '?param=40y40'
      }
      this.creator = res.creator
      const { songs: res1 } = await getAllSong(this.playListDetail.id)
      this.songs = res1.slice(0, 10)

      console.log(this.playListDetail)
      // console.log(this.creator);
      // console.log(this.songs);
      // this.playListDetail =
      // 表格
      // class ListDetail {
      //   constructor(list) {
      //     this.id = list.id;
      //     this.songName = list["name"];
      //     this.time = list.dt;
      //     this.singer = list.ar[0]["name"];
      //     this.al = list["al"]["name"];
      //   }
      // }
      let listAll = []
      // console.log(this.songs);
      for (let item of this.songs) {
        let a = Math.floor(item.dt / 1000)

        // console.log(a);
        item.dt =
          `${Math.floor(a / 60)}`.padStart(2, '0') +
          ':' +
          `${a % 60}`.padStart(2, '0')
        listAll.push(new ListDetail(item))
      }
      // let playList =
      this.tableList = listAll
      console.log(this.songs)
      console.log(this.tableList)
      // 歌单评论
      const res2 = await getAllComment(this.playListDetail.id, this.commentInfo)

      this.total = res2.total
      console.log(res2)

      class Comments {
        constructor(list, playListDetail) {
          this.content = list.content
          this.time = list.time
          this.timeStr = list.timeStr
          this.avatarUrl = list.user.avatarUrl
          this.nickname = list.user.nickname
          this.vipRights = list.user.vipRights
          this.beReplied = list.beReplied
          this.likedCount = list.likedCount
          this.id = playListDetail.id
          this.commentId = list.commentId
          this.liked = list.liked
        }
      }
      let getCommit = []
      for (let comment of res2.comments) {
        getCommit.push(new Comments(comment, this.playListDetail))
      }
      this.comments = getCommit
      for (let imgs of this.comments) {
        imgs.avatarUrl += '?param=50y50'
      }
      console.log(this.comments)
      // this.comments = new Comments(res2)
      // console.log(this.comments);
    },

    // 点击播放歌单
    async playList() {
      let songList = []
      for (let item of this.playListDetail.tracks) {
        const { data: res } = await getSongURL(item.id)
        console.log(res)
        songList.push(res[0].url)
      }
      // console.log(songList);
      this.$store.commit('savaSongURL', [])
      this.$store.commit('savaSongURL', songList)
    },
    // 点击添加
    add() {
      const tokenkey =
        window.sessionStorage.getItem('token') ||
        window.sessionStorage.getItem('cookie')
      if (!tokenkey) {
        this.$message.warning('请先登录')
        this.$store.commit('editIsShow')
      }
    },
    // 点击分享
    share() {
      const tokenkey =
        window.sessionStorage.getItem('token') ||
        window.sessionStorage.getItem('cookie')
      if (!tokenkey) {
        this.$message.warning('请先登录')
        this.$store.commit('editIsShow')
      }
    },
    // 点击下载
    down() {
      const tokenkey =
        window.sessionStorage.getItem('token') ||
        window.sessionStorage.getItem('cookie')
      if (!tokenkey) {
        this.$message.warning('请先登录')
        this.$store.commit('editIsShow')
      }
    },
    // 点击评论
    speak() {
      const tokenkey =
        window.sessionStorage.getItem('token') ||
        window.sessionStorage.getItem('cookie')
      if (!tokenkey) {
        this.$message.warning('请先登录')
        this.$store.commit('editIsShow')
      }
    },
    // 点击跳转到歌单页
    toplay(item) {
      this.$router.push({
        path: `/discover/playlist`,
        query: {
          name: item
        }
      })
    },
    // input焦点
    inputFocus() {
      if (
        !window.sessionStorage.getItem('token') &&
        !window.sessionStorage.getItem('cookie')
      ) {
        this.$message.warning('请先登录')
        this.$store.commit('editIsShow')
        this.disabled = true
      }
    },
    // 页数改变
    handleCurrentChange(newOffset) {
      this.commentInfo.offset = (newOffset - 1) * this.commentInfo.limit
      this.getplayListDetail()
    },
    // 点击发送评论
    async comment() {
      const res = await comment(1, 2, this.$route.query.id, this.commitInput)
      console.log(res)
      if (res.code !== 200) {
        return this.$message.error(`${res.msg}`)
      }
      this.$message.success(`评论成功`)
      this.getplayListDetail()
    },
    // 点击表情
    emojiClick(index) {
      if (
        !window.sessionStorage.getItem('token') &&
        !window.sessionStorage.getItem('cookie')
      ) {
        this.$message.warning('请先登录')
        this.$store.commit('editIsShow')
        return (this.disabled = true)
      }
      let a = this.commitInput.split('')
      a.push(this.emojis[index])
      let b = a.join('')
      this.commitInput = b
    }
  },
  watch: {
    $route() {
      this.getplayListDetail()
    }
  }
}
</script>

<style lang="scss" scoped>
.p {
  width: 415px;
  // overflow: hidden;
  //   text-overflow: ellipsis;
  //   white-space: nowrap;
  //   word-wrap: normal;
}
.play,
.addplay,
.add,
.share,
.down,
.speak,
.button {
  background: url('https://s2.music.126.net/style/web2/img/button2.png?3b1af8779cab6a84196c071d5a3f4343')
    no-repeat 0 9999px;
}

.play-detail {
  width: 100%;
  .detail-center {
    display: flex;
    width: 980px;
    border: 1px solid #d3d3d3;
    margin: 0 auto;
    background: #fff;
    // 总左
    .detail-left {
      border-right: 1px solid #d3d3d3;
      padding: 47px 30px 40px 39px;
      width: 709px;
      // 头部
      .left-header {
        display: flex;
        // 头部左
        .header-left {
          width: 208px;
          height: 208px;
          background: url('https://s2.music.126.net/style/web2/img/coverall.png?2d1d1b7f1af4fa6da7dff9d72b4936fd');
          background-position: 0 -1285px;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            border: 0;
            display: block;
            width: 200px;
            height: 200px;
          }
        }
        // 头部右
        .header-right {
          padding-left: 25px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .right-header {
            display: flex;

            .icon {
              display: block;
              width: 54px;
              height: 24px;
              background: url('https://s2.music.126.net/style/web2/img/icon.png?678c47fad4a114dea212a64e017e34ba')
                no-repeat 0 9999px;
              background-position: 0 -243px;
              position: relative;
              &::after {
                content: ' ';
                position: absolute;
                width: 8px;
                height: 8px;
                top: 2px;
                right: 14px;
                background: url('https://s2.music.126.net/style/web2/img/white-r-icon@3x.png?b1e8ce131c5d83bfb053cc056bde6f3f');
                background-size: cover;
              }
            }
            h2 {
              width: 342px;
              padding-left: 10px;
              color: #333;
              font-size: 20px;
              font-weight: normal;
              // height: 24px;
              line-height: 24px;
            }
          }
          .right-header2 {
            display: flex;
            margin: 10px 0;
            align-items: center;
            height: 35px;
            // margin-bottom: 20px ;
            .right-header2-a1 {
              display: block;
              width: 35px;
              height: 35px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .right-header2-a2 {
              margin-left: 10px;
              color: #0c73c2;
              text-decoration: none;
              &:hover {
                text-decoration: underline;
              }
            }
            .right-header2-span {
              margin-left: 10px;
              color: #999;
              font-size: 12px;
            }
          }
          .right-header3 {
            display: flex;
            margin: 10px 0;
            .playbutton {
              width: 98px;
              height: 31px;
              display: flex;
              .play {
                width: 66px;
                height: 31px;
                color: #fff;
                background-position: right -387px;
                border-radius: 3px 0 0 3px;
                text-align: center;
                line-height: 31px;

                &:hover {
                  background-position: right -469px;
                  cursor: pointer;
                }
              }
              .addplay {
                width: 31px;
                height: 31px;
                background-position: 0 -1588px;
                &:hover {
                  background-position: -40px -1588px;
                  cursor: pointer;
                }
              }
            }
            .add {
              margin-left: 10px;
              width: 78px;
              height: 31px;
              background-position: 0 -977px;
              border-right: 1px solid #ccc;
              // background-position:  right -1020px;
              padding-left: 28px;
              line-height: 31px;
              &:hover {
                background-position: 0 -1063px;
                cursor: pointer;
              }
            }
            .share {
              margin-left: 10px;
              width: 59px;
              height: 31px;
              background-position: 0 -1225px;
              border-right: 1px solid #ccc;
              border-radius: 0 3px 3px 0;
              text-align: center;
              line-height: 31px;
              padding-left: 20px;
              &:hover {
                cursor: pointer;
                background-position: 0 -1268px;
              }
            }
            .down {
              margin-left: 10px;
              width: 59px;
              height: 31px;
              background-position: 0 -2761px;
              border-right: 1px solid #ccc;
              border-radius: 0 3px 3px 0;
              text-align: center;
              line-height: 31px;
              padding-left: 20px;
              &:hover {
                cursor: pointer;
                background-position: 0 -2805px;
              }
            }
            .speak {
              margin-left: 10px;
              width: 60px;
              height: 31px;
              background-position: -0 -1465px;
              border-right: 1px solid #ccc;
              border-radius: 0 3px 3px 0;
              text-align: center;
              line-height: 31px;
              padding-left: 20px;
              &:hover {
                cursor: pointer;
                background-position: 0 -1508px;
              }
            }
          }
          .right-header4 {
            display: flex;
            margin: 10px 0;
            .button {
              margin-left: 10px;
              color: #666;
              width: 50px;
              height: 22px;
              background-position: 0 0;
              text-align: center;
              line-height: 22px;
              color: #777;
              border-right: 1px #777 solid;
              border-left: 1px #777 solid;
              border-radius: 40% 40% 40% 40%;
              &:hover {
                background-position: right -1430px;
                cursor: pointer;
              }
            }
          }
          .right-header5 {
            color: #666;
          }
        }
      }
      .left-body {
        margin-top: 50px;
        .body-left {
          width: 145px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .right-color {
          color: #c20c0c;
          font-weight: bold;
        }
      }
    }
    // 总右
    .detail-right {
      width: 270px;
      padding: 20px 40px 40px 30px;
    }
  }
}
.commit {
  width: 100%;
  // height: 98px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .commit-img {
    display: block;
    width: 50px;
    height: 50px;
  }
  .commit-input {
    width: 91%;
    .em,
    .email {
      display: block;
      width: 18px;
      height: 18px;
      background: url('https://s2.music.126.net/style/web2/img/icon.png?f3b9eb035cfaa5e1304d1fec5c8374da')
        no-repeat 0 9999px;
      &:hover {
        cursor: pointer;
      }
    }
    .em {
      margin-left: 2px;
      float: left;
      background-position: -60px -490px;
    }
    .email {
      float: left;
      background-position: -40px -490px;
    }
  }
}
.commit-bottom {
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
}
.el-popover ul {
  display: flex;
  flex-wrap: wrap;
  li {
    &:hover {
      cursor: pointer;
    }
  }
}
.el-pagination {
  text-align: center;
  margin-top: 30px;
}
</style>
